import React, { Component ,lazy,Suspense} from 'react'
import {NavLink,Route} from 'react-router-dom'
import Loading from './components/Loading'
//import Home from './components/home/Home'
//import About from './components/about/About'
// const Home =lazy(()=>{
// 	return import('./components/home/Home')
// }) 
// const About =lazy(()=>{
// 	return import('./components/about/About')
// }) 
const Home =lazy(()=>
	 import('./components/home/Home')
) 
const About =lazy(()=>
	 import('./components/about/About')
) 

export default class App extends Component {
    
   
    render() {
        return (
            <div>
				<div className="row">
					<div className="col-xs-offset-2 col-xs-8">
						<div className="page-header"><h2>React Router Demo</h2></div>
					</div>
				</div>
				<div className="row">
					<div className="col-xs-2 col-xs-offset-2">
						<div className="list-group">

							{/* 原生html中，靠<a>跳转不同的页面 */}
							{/* <a className="list-group-item" href="./about.html">About</a>
							<a className="list-group-item active" href="./home.html">Home</a> */}

							{/* 在React中靠路由链接实现切换组件--编写路由链接 */}
							<NavLink className="list-group-item" to="/about">About</NavLink>
							<NavLink className="list-group-item" to="/home">Home</NavLink>
						</div>
					</div>
					<div className="col-xs-6">
						<div className="panel">
							<div className="panel-body">
								<Suspense fallback={<Loading/>}>
								<Route path="/about" component={About}/>
								<Route path="/home" component={Home}/>
								</Suspense>
								{/* 注册路由 */}
								
								
							</div>
						</div>
					</div>
				</div>
			</div>
        )
    }
}
